<script lang="ts" setup>
import { ref, watch } from 'vue';

import { IconifyIcon } from '@vben/icons';

import {
  Button,
  Col,
  Form,
  FormItem,
  Input,
  Row,
  Select,
  SelectOption,
  Switch,
  Textarea,
} from 'ant-design-vue';

// Props
const props = defineProps<{
  capability?: any;
}>();

// Emits
const emit = defineEmits<{
  update: [data: any];
}>();

// 响应式数据
const formData = ref({
  // 状态检查
  resourceState: '',
  stateOperator: 'equals',
  enableStateCheck: false,

  // 权限检查
  userRole: [],
  permissionLevel: 'read',
  enablePermissionCheck: false,

  // 时间约束
  startTime: '',
  endTime: '',
  enableTimeConstraint: false,

  // 自定义表达式
  customExpression: '',

  // 依赖检查
  dependencies: [],
});

// 监听props变化
watch(
  () => props.capability,
  (newCapability) => {
    if (newCapability?.preconditions) {
      formData.value = {
        ...formData.value,
        ...newCapability.preconditions,
      };
    }
  },
  { immediate: true },
);

// 方法
const handleFormChange = () => {
  emit('update', { preconditions: formData.value });
};

const addDependency = () => {
  formData.value.dependencies.push({
    capabilityId: '',
    status: 'enabled',
    description: '',
  });
  handleFormChange();
};

const removeDependency = (index: number) => {
  formData.value.dependencies.splice(index, 1);
  handleFormChange();
};
</script>

<template>
  <div class="capability-preconditions">
    <Form layout="vertical" :model="formData">
      <div class="preconditions-section">
        <h4>前置约束配置</h4>
        <p class="section-desc">配置能力执行前需要满足的条件</p>

        <!-- 状态检查 -->
        <div class="condition-group">
          <h5>状态检查</h5>
          <Row :gutter="24">
            <Col :span="8">
              <FormItem label="资源状态" name="resourceState">
                <Select
                  v-model:value="formData.resourceState"
                  placeholder="请选择资源状态"
                  @change="handleFormChange"
                >
                  <SelectOption value="idle">空闲</SelectOption>
                  <SelectOption value="reserved">已预订</SelectOption>
                  <SelectOption value="occupied">已占用</SelectOption>
                  <SelectOption value="cleaning">清洁中</SelectOption>
                  <SelectOption value="maintenance">维护中</SelectOption>
                </Select>
              </FormItem>
            </Col>
            <Col :span="8">
              <FormItem label="状态操作符" name="stateOperator">
                <Select
                  v-model:value="formData.stateOperator"
                  placeholder="请选择操作符"
                  @change="handleFormChange"
                >
                  <SelectOption value="equals">等于</SelectOption>
                  <SelectOption value="not_equals">不等于</SelectOption>
                  <SelectOption value="in">包含</SelectOption>
                  <SelectOption value="not_in">不包含</SelectOption>
                </Select>
              </FormItem>
            </Col>
            <Col :span="8">
              <FormItem label="启用状态检查" name="enableStateCheck">
                <Switch
                  v-model:checked="formData.enableStateCheck"
                  @change="handleFormChange"
                />
              </FormItem>
            </Col>
          </Row>
        </div>

        <!-- 权限检查 -->
        <div class="condition-group">
          <h5>权限检查</h5>
          <Row :gutter="24">
            <Col :span="8">
              <FormItem label="用户角色" name="userRole">
                <Select
                  v-model:value="formData.userRole"
                  mode="multiple"
                  placeholder="请选择用户角色"
                  @change="handleFormChange"
                >
                  <SelectOption value="admin">管理员</SelectOption>
                  <SelectOption value="manager">经理</SelectOption>
                  <SelectOption value="staff">员工</SelectOption>
                  <SelectOption value="guest">访客</SelectOption>
                </Select>
              </FormItem>
            </Col>
            <Col :span="8">
              <FormItem label="权限级别" name="permissionLevel">
                <Select
                  v-model:value="formData.permissionLevel"
                  placeholder="请选择权限级别"
                  @change="handleFormChange"
                >
                  <SelectOption value="read">只读</SelectOption>
                  <SelectOption value="write">读写</SelectOption>
                  <SelectOption value="admin">管理</SelectOption>
                </Select>
              </FormItem>
            </Col>
            <Col :span="8">
              <FormItem label="启用权限检查" name="enablePermissionCheck">
                <Switch
                  v-model:checked="formData.enablePermissionCheck"
                  @change="handleFormChange"
                />
              </FormItem>
            </Col>
          </Row>
        </div>

        <!-- 时间约束 -->
        <div class="condition-group">
          <h5>时间约束</h5>
          <Row :gutter="24">
            <Col :span="8">
              <FormItem label="开始时间" name="startTime">
                <Input
                  v-model:value="formData.startTime"
                  placeholder="HH:mm"
                  @change="handleFormChange"
                />
              </FormItem>
            </Col>
            <Col :span="8">
              <FormItem label="结束时间" name="endTime">
                <Input
                  v-model:value="formData.endTime"
                  placeholder="HH:mm"
                  @change="handleFormChange"
                />
              </FormItem>
            </Col>
            <Col :span="8">
              <FormItem label="启用时间约束" name="enableTimeConstraint">
                <Switch
                  v-model:checked="formData.enableTimeConstraint"
                  @change="handleFormChange"
                />
              </FormItem>
            </Col>
          </Row>
        </div>

        <!-- 自定义表达式 -->
        <div class="condition-group">
          <h5>自定义表达式</h5>
          <FormItem label="表达式" name="customExpression">
            <Textarea
              v-model:value="formData.customExpression"
              placeholder="请输入自定义表达式，例如：resource.status === 'idle' && user.role === 'admin'"
              :rows="4"
              @change="handleFormChange"
            />
          </FormItem>
          <div class="expression-help">
            <p>支持JavaScript表达式，可以使用以下变量：</p>
            <ul>
              <li><code>resource</code> - 当前资源对象</li>
              <li><code>user</code> - 当前用户对象</li>
              <li><code>context</code> - 执行上下文</li>
            </ul>
          </div>
        </div>

        <!-- 依赖检查 -->
        <div class="condition-group">
          <h5>依赖检查</h5>
          <div class="dependencies-list">
            <div
              v-for="(dep, index) in formData.dependencies"
              :key="index"
              class="dependency-item"
            >
              <Row :gutter="16">
                <Col :span="6">
                  <Input
                    v-model:value="dep.capabilityId"
                    placeholder="依赖能力ID"
                    @change="handleFormChange"
                  />
                </Col>
                <Col :span="6">
                  <Select
                    v-model:value="dep.status"
                    placeholder="期望状态"
                    @change="handleFormChange"
                  >
                    <SelectOption value="enabled">启用</SelectOption>
                    <SelectOption value="disabled">禁用</SelectOption>
                    <SelectOption value="completed">已完成</SelectOption>
                    <SelectOption value="running">运行中</SelectOption>
                  </Select>
                </Col>
                <Col :span="8">
                  <Input
                    v-model:value="dep.description"
                    placeholder="依赖描述"
                    @change="handleFormChange"
                  />
                </Col>
                <Col :span="4">
                  <Button type="text" danger @click="removeDependency(index)">
                    删除
                  </Button>
                </Col>
              </Row>
            </div>
          </div>
          <Button
            type="dashed"
            @click="addDependency"
            style="width: 100%; margin-top: 16px"
          >
            <IconifyIcon icon="ant-design:plus-outlined" />
            添加依赖
          </Button>
        </div>
      </div>
    </Form>
  </div>
</template>

<style lang="less" scoped>
.capability-preconditions {
  padding: 24px;

  .preconditions-section {
    h4 {
      margin-bottom: 8px;
      color: #333;
      font-weight: 600;
    }

    .section-desc {
      margin-bottom: 24px;
      color: #666;
      font-size: 14px;
    }

    .condition-group {
      margin-bottom: 32px;
      padding: 20px;
      border: 1px solid #f0f0f0;
      border-radius: 8px;
      background: #fafafa;

      h5 {
        margin-bottom: 16px;
        color: #333;
        font-weight: 600;
        font-size: 16px;
      }

      .expression-help {
        margin-top: 12px;
        padding: 12px;
        background: #f5f5f5;
        border-radius: 4px;

        p {
          margin-bottom: 8px;
          color: #666;
          font-size: 12px;
        }

        ul {
          margin: 0;
          padding-left: 16px;

          li {
            margin-bottom: 4px;
            color: #666;
            font-size: 12px;

            code {
              background: #e6f7ff;
              padding: 2px 4px;
              border-radius: 2px;
              color: #1890ff;
            }
          }
        }
      }

      .dependencies-list {
        .dependency-item {
          margin-bottom: 16px;
          padding: 16px;
          border: 1px solid #e8e8e8;
          border-radius: 6px;
          background: white;
        }
      }
    }
  }
}
</style>
